import { Spin } from 'antd';
import { connect } from '@/dva';
import EditContent from './content';
import { ConnectProps } from '@/dva/types';
import { CloneProps } from '@/components/ModalPro';
import React, { useRef, useEffect, useCallback } from 'react';
import { State as ClassifyProps } from '@/models/imageClassify/types';

type Props = ConnectProps & CloneProps & {
  item?: any;
  onSuccess?(): any;
  classify: ClassifyProps;
}

const Index = (props: Props) => {
  const {
    item,
    classify
  } = props;

  const {
    submitLoading
  } = classify || {};

  const id = props?.item?._id;

  const instance = useRef<any>(null);

  /*提交数据*/
  const onSubmit = useCallback(async () => {
    const fields = await instance.current?.vailForm();
    const type: string = `imageClassify/${id ? 'update' : 'create'}`;
    await props?.commit?.(type, { ...fields, id });
    props?.onSuccess?.();
    props?.closeModal?.();
  }, [id]);

  useEffect(() => {
    props?.listenOk?.(onSubmit)
  }, []);

  useEffect(() => {
    if (!submitLoading) {
      props?.submitStop?.()
    } else {
      props?.submitLoading?.();
    }
  }, [submitLoading]);

  return (
    <Spin spinning={submitLoading}>
      <EditContent item={item} ref={instance}/>
    </Spin>
  )
}

export default connect({
  classify: ({ imageClassify }) => imageClassify
})(Index);
